<template>
    <!-- 最大的容器 -->
    <el-container class="contain">
        <!-- 头部部分 -->
        <el-header class="header" style="height:64px">
            <!-- 左边和右边 -->
            <div class="hd-left">
                <el-image
                    :src="require('@/assets/矩形 2 拷贝 2.png')"
                    fit="cover"
                    class="left-image">
                </el-image>
                 <!-- 图标 -->
                <el-image
                    :src="require('@/assets/宇喜logo.png')"
                    fit="cover"
                    class="left-right-image">
                </el-image>
            </div>
            <div class="hd-right">
                <p class="name">宇喜首页</p>
                <el-image
                    :src="require('@/assets/图层 49.png')"
                    fit="cover"
                    class="right-image">
                </el-image>
            </div>
        </el-header>
        <!-- 导航栏 -->
        <div class="nav">
            <!-- 左边 -->
            <h3 class="nav-title">宇喜服务市场</h3>
            <!-- 中间 -->
            <div class="nav-list">
                <a href="">
                    <p>研发创新</p>
                </a>
                <a href="">
                   <p>行业</p>
                </a>
                <a href="">
                    <p>服务</p>
                </a>
                <a href="">
                     <p>体验馆</p>
                </a>             
            </div>
            <!-- 右边 -->
            <el-input
                placeholder="输入案例/解决方案"
                prefix-icon="el-icon-search"
                v-model="input2">
            </el-input>
        </div>
        <!-- 这是banner -->
        <div class="banner">
            <div class="left">
                <ul class="ul-tes">
                    <li>
                        <div class="con">
                            <h3 class="title">研发创新 ></h3>
                            <div class="info">
                                <p><a href="">宇喜工具集</a><a href="">编码器</a></p>
                                <p><a href="">宇喜pdm工具集</a></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="con">
                            <h3 class="title">行业 ></h3>
                            <div class="info">
                                <p><a href="">教育/培训</a><a href="">制造业</a></p>
                                <p><a href="">软件/IT服务</a><a href="">医药</a></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="con">
                            <h3 class="title">服务 ></h3>
                            <div class="info">
                                <p><a href="">解决方案</a></p>
                                <p><a href="">云服务3DExperience</a></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="con">
                            <h3 class="title">体验馆 ></h3>
                            <div class="info">
                                <p><a href="">三维可视化交互</a></p>
                                <p><a href="">产品试用</a></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="center">
                <div class="block">                   
                    <el-carousel trigger="click">
                        <el-carousel-item>
                            <el-image
                                :src="require('@/assets/图层 14.png')"
                                fit="cover"
                                class="center-image">
                            </el-image>
                        </el-carousel-item>
                        <el-carousel-item>
                            <el-image
                                :src="require('@/assets/图层 14.png')"
                                fit="cover"
                                class="center-image">
                            </el-image>
                        </el-carousel-item>
                        <el-carousel-item>
                            <el-image
                                :src="require('@/assets/图层 14.png')"
                                fit="cover"
                                class="center-image">
                            </el-image>
                        </el-carousel-item>
                        <el-carousel-item>
                            <el-image
                                :src="require('@/assets/图层 14.png')"
                                fit="cover"
                                class="center-image">
                            </el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="right">
                <!-- 三个盒子 -->
                <ul class="ul-case">
                    <li>
                        <div class="con">
                            <div class="images">
                                <el-image
                                    :src="require('@/assets/图片1.png')"
                                    fit="cover"
                                    class="case-image">
                                </el-image>
                            </div>
                            <p>宇喜工具集v1.0</p>
                        </div>
                    </li>
                     <li>
                        <div class="con">
                            <div class="images">
                                <el-image
                                    :src="require('@/assets/图层 15.png')"
                                    fit="cover"
                                    class="case-image">
                                </el-image>
                            </div>
                            <p>电气3D</p>
                        </div>
                    </li>
                     <li>
                        <div class="con">
                            <div class="images">
                                <el-image
                                    :src="require('@/assets/图层 16.png')"
                                    fit="cover"
                                    class="case-image">
                                </el-image>
                            </div>
                            <p>电气3D</p>
                        </div>
                    </li>
                </ul>
            </div>        
        </div>
         <!-- 中间内容区域 -->
        <el-main class="main">
            <!-- 第一屏体验专区 -->
            <div class="row-a1">
                <div class="content">
                    <h3 class="title">体验专区</h3>
                    <!-- 折叠页面 -->
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="dianji">
                        <el-tab-pane label="三维可视化交互" name="first">                           
                           <div class="left">
                               <h3>三维可视化交互</h3>
                               <p>实现三维立体世界的自由拖拽</p>
                               <p>与对应数据进行互动，融合数据，结合场景</p>
                               <p>帮助用户由宏观到微观更快地了解数据，做出更具时效性的决策</p>
                               <el-button type="primary" class="btns">免费体验</el-button>
                           </div>
                           <div class="right">
                               <h3>三维可视化交互</h3>
                               <p>实现三维立体世界的自由拖拽</p>
                               <p>与对应数据进行互动，融合数据，结合场景</p>
                               <p>帮助用户由宏观到微观更快地了解数据，做出更具时效性的决策</p>
                               <el-button type="primary" class="btns">免费体验</el-button>
                           </div>
                        </el-tab-pane>
                        <el-tab-pane label="SolidWorks产品1" name="second">SolidWorks产品1</el-tab-pane>
                        <el-tab-pane label="SolidWorks产品2" name="third">SolidWorks产品2</el-tab-pane>
                        <el-tab-pane label="企业应用" name="fourth">企业应用</el-tab-pane>
                    </el-tabs>
                     <!-- 没有找到想要的 -->
                    <div class="no-find">
                        <a href="">
                            <p class="p1">?</p>
                            <p class="p2">没有我想要的，咨询客服</p>
                        </a>
                    </div>
                </div>                           
            </div>
            <!-- row-a2精英团队 -->
            <div class="row-a2">
                <div class="content">
                    <h3 class="title">精英团队</h3>
                    <ul class="ul-pro">
                        <li>
                            <div class="con">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 6.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">北川景子</h3>
                                    <p class="txt-desc">北川景子是日本新生代女星。1986年出生
                                       于日本兵库县神户市中央区。 
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 7.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">林允儿</h3>
                                    <p class="txt-desc">1990年5月30日出生于韩国首尔永登浦区，
                                        韩国女歌手、演员、主持人。 
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 8.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">鹿晗</h3>
                                    <p class="txt-desc">1990年4月20日出生于北京市海淀区，
                                        中国内地流行乐男歌手、影视演员。 
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con mar-right">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 9.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">范冰冰</h3>
                                    <p class="txt-desc">1981年9月16日出生于山东青岛，华语影视女演员
                                        、制片人、歌手，毕业于上海师范大学谢晋影视艺术学院。1996年出演电视剧《女 
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 42.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">杨颖</h3>
                                    <p class="txt-desc">北川景子是日本新生代女星。
                                        1986年出生于日本兵库县神户市中央区。  
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 43.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">全智贤</h3>
                                    <p class="txt-desc">1990年5月30日出生于韩国首尔永登浦区，
                                        韩国女歌手、演员、主持人。 
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 44.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">北川景子刘诗诗</h3>
                                    <p class="txt-desc">1990年4月20日出生于北京市海淀区，
                                        中国内地流行乐男歌手、影视演员。 
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con mar-right">
                                <div class="logo">
                                    <el-image
                                        :src="require('@/assets/图层 45.png')"
                                        fit="cover"
                                        class="logo-image">
                                    </el-image>        
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">张艺兴</h3>
                                    <p class="txt-desc">1981年9月16日出生于山东青岛，华语影视女演员、制片人、歌手，毕业于上海师范大学谢晋影视艺术学院。1996年出演电视剧《女强人》，1998年主演电视剧《还珠格格》获得广泛关注，2002年主演电影《一见钟情
                                        》涉足影坛。2008年，赴韩国留学期间在明洞逛街时，
                                        被韩国SM娱乐有限公司星探发掘成为旗下练习生。
                                    </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>            
            </div>
            <!-- 这是第三屏 客户成功案例 -->
            <div class="row-a3">
                <div class="content">
                    <h3 class="title">客户成功案例</h3>
                    <div class="neirong">
                        <div class="left">
                            <el-image
                                :src="require('@/assets/图层 18.png')"
                                fit="cover"
                                class="left-image">
                             </el-image>
                        </div>
                        <div class="right">
                            <h3 class="r-title">电气设计</h3>
                            <p class="r-info">SOLIDWORKS Electrical 机电一体化解决方案将2D电气设计数据与3D电气
                                设计数据直接集成在SOLIDWORKS机械产品设计平台上，完成原理图设计、3D空间布置及3D自动布线，
                                并且电气及机械设计数据实时同步更新。电气设计数据中零部件信息及项目图纸与SOLIDWORKS 
                                3D机械产品设计数据可以通过S
                                OLIDWORKS PDM进行管理，使电气和机械之间的设计更加高效，从而实现机电一体化设计。
                            </p>
                            <p class="r-desc">相关产品：<a href="">Electrical Camera 6</a></p>
                            <div class="bton">
                                <el-button type="primary" class="yuedu">阅读案例</el-button>
                                <el-button type="success" class="zixun">咨询购买同款</el-button>
                            </div>
                        </div>
                    </div>
                    <!-- 商标 -->
                    <div class="brand">
                        <a href="">
                            <el-image
                                :src="require('@/assets/图层 20.png')"
                                fit="cover"
                                class="brand-image">
                             </el-image>
                        </a>
                        <a href="">
                            <el-image
                                :src="require('@/assets/图层 24.png')"
                                fit="cover"
                                class="brand-image">
                             </el-image>
                        </a>
                        <a href="">
                            <el-image
                                :src="require('@/assets/图层 23.png')"
                                fit="cover"
                                class="brand-image">
                             </el-image>
                        </a>
                        <a href="">
                            <el-image
                                :src="require('@/assets/图层 25.png')"
                                fit="cover"
                                class="brand-image">
                             </el-image>
                        </a>
                        <a href="">
                            <el-image
                                :src="require('@/assets/图层 26.png')"
                                fit="cover"
                                class="brand-image">
                             </el-image>
                        </a>
                        <a href="">
                            <el-image
                                :src="require('@/assets/图层 27.png')"
                                fit="cover"
                                class="brand-image">
                             </el-image>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 这是第四屏 猜你需要 -->
            <div class="row-a4">
                <div class="content">
                    <div class="top">
                        <h3 class="title">猜您需要</h3>
                        <ul class="ul-list">
                            <li>
                                <div class="con">
                                    <h3 class="con-title">机电一体化解决方案</h3>
                                    <p class="con-desc">24h为你服务  助力企业创享AI能力</p>
                                    <p class="con-bos">高性价比</p>
                                    <el-button type="success" class="btns">立即咨询</el-button>                     
                                </div>
                            </li>
                             <li>
                                <div class="con">
                                    <h3 class="con-title">企业标准化解决方案</h3>
                                    <p class="con-desc">办公司首选企业服务中心</p>
                                    <p class="con-bos">高性价比</p>
                                    <el-button type="success" class="btns">立即咨询</el-button>                     
                                </div>
                            </li>
                             <li>
                                <div class="con">
                                    <h3 class="con-title">全流程一体化研发平台</h3>
                                    <p class="con-desc">办公司首选企业服务中心</p>
                                    <p class="con-bos">高性价比</p>
                                    <el-button type="success" class="btns">立即咨询</el-button>                     
                                </div>
                            </li>
                        </ul>                     
                    </div>
                    <div class="bottom">
                        <h3 class="title">行业趋势推荐</h3>
                        <ul class="ul-list">
                            <li>
                                <div class="con">
                                    <h3 class="con-title">机电一体化解决方案</h3>
                                    <p class="con-desc">24h为你服务  助力企业创享AI能力</p>
                                    <p class="con-bos">高性价比</p>
                                    <el-button type="success" class="btns">立即咨询</el-button>                     
                                </div>
                            </li>
                             <li>
                                <div class="con">
                                    <h3 class="con-title">企业标准化解决方案</h3>
                                    <p class="con-desc">办公司首选企业服务中心</p>
                                    <p class="con-bos">高性价比</p>
                                    <el-button type="success" class="btns">立即咨询</el-button>                     
                                </div>
                            </li>
                             <li>
                                <div class="con">
                                    <h3 class="con-title">全流程一体化研发平台</h3>
                                    <p class="con-desc">办公司首选企业服务中心</p>
                                    <p class="con-bos">高性价比</p>
                                    <el-button type="success" class="btns">立即咨询</el-button>                     
                                </div>
                            </li>
                        </ul>         
                    </div>
                </div>
                
            </div>
            <!-- 第五屏幕 行业趋势推荐 -->
            <div class="row-a5">
                <div class="content">
                    <h3 class="title">宇喜学院推荐课程</h3>
                    <div class="logo">
                        <div class="logo-img">
                            <el-image
                                :src="require('@/assets/18_041118_60345_1_.png')"
                                fit="cover"
                                class="a5-image">
                            </el-image>
                            <p>3D建模课程培训</p>
                        </div>
                        <div class="logo-img">
                            <el-image
                                :src="require('@/assets/Campus-Imagina-Sala-Ordinadors-1000_1_.png')"
                                fit="cover"
                                class="a5-image">
                            </el-image>  
                            <p>汽车制造课程培训</p>
                        </div>
                        <div class="logo-img">
                             <el-image
                                :src="require('@/assets/20141004_144303.png')"
                                fit="cover"
                                class="a5-image">
                            </el-image>
                            <p>机械组装现场教学</p>
                        </div>                                                                        
                    </div>
                    <el-button type="success" class="btns">立即咨询</el-button> 
                </div>
            </div>
            <!-- 第6屏幕 为什么选择行业 -->
            <div class="row-a6">
                <div class="content">
                    <h3 class="title">为什么选择宇喜服务市场</h3>
                    <ul class="ul-pros">
                        <li>
                            <div class="con">
                                <div class="logo">
                                     <el-image
                                        :src="require('@/assets/图层 34.png')"
                                        fit="cover"
                                        class="a6-image">
                                    </el-image>
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">优质服务商保障</h3>
                                    <p class="txt-p1">提供方案文档，不满意不收费</p>
                                    <p class="txt-p2">15年精选优质服务商</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con">
                                <div class="logo">
                                     <el-image
                                        :src="require('@/assets/图层 32.png')"
                                        fit="cover"
                                        class="a6-image">
                                    </el-image>
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">全程为您服务</h3>
                                    <p class="txt-p1">派驻工程师助您实施工作环境</p>
                                    <p class="txt-p2">7x8小时客服全程服务</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="con">
                                <div class="logo">
                                     <el-image
                                        :src="require('@/assets/图层 33.png')"
                                        fit="cover"
                                        class="a6-image">
                                    </el-image>
                                </div>
                                <div class="txt">
                                    <h3 class="txt-title">我们值得信赖</h3>
                                    <p class="txt-p1">累计服务800+家企业</p>
                                    <p class="txt-p2">助力企业业务成功</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 第七屏幕 定制内容 -->
            <div class="row-a7">
                <div class="content">
                    <div class="left">
                        <h3>没有看到感兴趣的内容？</h3>
                        <p>咨询客服获得您所在行业的资料</p>
                    </div>
                    <div class="right">
                        <el-button type="success" class="dingzhi">定制内容</el-button>
                        <el-button type="success" class="zixun">咨询官方客服</el-button>
                    </div>
                </div>
            </div>
        </el-main>
        <!-- 底部区域 -->
        <el-footer class="footer">
            <div class="conent">
                <div class="top">
                    <div class="left">
                        <ul class="ul-txt">
                            <li>
                                <div class="con">
                                    <h3 class="title">关于我们</h3>
                                    <ul class="txt">
                                        <li>
                                            <a href=""><p>服务市场简介</p></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="con">
                                    <h3 class="title">用户指南</h3>
                                    <ul class="txt">
                                        <li>
                                           <a href=""> <p>常见问题 </p></a>
                                            <a href=""><p>买家中心</p></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="con">
                                    <h3 class="title">合作伙伴</h3>
                                    <ul class="txt">
                                        <li>
                                           <a href=""><p>联系我们</p></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="con">
                                    <h3 class="title">服务支持</h3>
                                    <ul class="txt">
                                        <li>
                                            <a href=""><p>服务支持</p></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <h3 class="title">关注我们</h3>
                        <div class="logo">                                                    
                            <a href="">
                            <el-image
                            style="width: 48px; height: 48px"
                            :src="require('@/assets/微信2.png')"
                            fit="fit"></el-image>
                            </a>
                            <a href="">
                                <el-image
                            style="width: 48px; height: 48px"
                            :src="require('@/assets/BILIBILI_LOGO 拷贝.png')"
                            fit="fit"></el-image>
                            </a>
                            <a href="">
                                <el-image
                            style="width: 48px; height: 48px"
                            :src="require('@/assets/头条样式 拷贝.png')"
                            fit="fit"></el-image>
                            </a>
                            <a href="">
                            <el-image
                            style="width: 48px; height: 48px"
                            :src="require('@/assets/抖音 拷贝.png')"
                            fit="fit">
                            </el-image>
                            </a>                              
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <!-- 行业案例 -->
                    <div class="txt">
                       <a href=""><p>行业案例: <span>教育</span><span>制造业</span><span>软件/IT服务</span><span>医药</span></p></a> 
                        <a href=""> <p>服务支持:<span>标准化</span><span>三维可视化</span><span>车间无纸化</span><span>一体化</span><span>培训</span></p></a> 
                         <a href=""><p>免费体验:<span>三维可视化</span><span>SolidWorks产品1</span><span>SolidWorks产品2</span></p></a> 
                    </div>
                    <div class="erweima">
                        <el-image
                            :src="require('@/assets/图层 39.png')"
                            fit="cover"
                            class="erweima-img">
                        </el-image>
                    </div>
                </div>
                <div class="bottom">
                    <div class="logo">
                        <el-image
                            :src="require('@/assets/宇喜logo2.png')"
                            fit="cover"
                            class="logo-image">
                        </el-image>
                    </div>
                    <div class="txt">
                        <a href=""><p class="p1">地址：广州市番禺大道555号天安科技园25号楼305房    电话：020-3938 8238   E-mail：yuxite</p></a>
                        <a href=""><p class="p2">©2021广州宇喜资讯科技有限公司 版权所有</p></a>
                    </div>
                </div>
            </div>
        </el-footer>
    </el-container>
</template>
<script>
export default {
  data:function(){
    return {
      input2:''
    }
  }
}
</script>
<style lang="less">
body{
    background: #F5F5F5;
}

.contain{
    text-align: left;
    .header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 64px;
        background: #FFFFFF;
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15), 0px -1px 0px 0px #EEEEEE;
        .hd-left{
            display: flex;
            flex-direction: row;
            align-items: center;
            .left-image{
                width: 16px;
                height: 12px;
                display: block;   
                margin-right: 27px;          
            }
            .left-right-image{
                width: 109px;
                height: 56px;
                display: block;
            }   
        }
        .hd-right{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-right: 20px;
            .name{
                height: 20px;
                font-size: 14px;
                font-family: SourceHanSansSC;
                font-weight: 400;
                color: #555555;
                line-height: 20px;
                border-right: 1px solid #cccccc;
                padding-right: 20px;
            }
            .right-image{
                width: 32px;
                height: 32px;
                border-radius: 50%;
                margin-left: 20px;
            }
        }
    }
    // 导航栏
    .nav{
        input{
            background: none;
            border: none;
        }
        display: flex;
        width: 100%;
        height: 80px;
        align-items: center;
        background: #DA251D;
        padding-left: 360px;
        .nav-title{     
            width: 192px;
            min-width: 192px;
            height: 32px;
            font-size: 32px;
            font-family: SourceHanSansSC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 32px;
            margin-right: 212px;
        }
        .nav-list{
            display: flex;
            align-items: center;
            p{          
                min-width: 138px;
                height: 18px;
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                padding-right: 66px;
            }
        }
        .el-input{          
            width: 340px;
            height: 32px;   
            ::placeholder{
                height: 14px;
                font-size: 14px;
                font-family: SourceHanSansSC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 14px;
                opacity: 0.6;
            }
            .el-input__inner{
                border-bottom: 1px solid #cccccc;
                padding-left: 10px;
            }
            .el-input__prefix{
                left: none;
                left: 310px;
                top: -2px;
            }
        }
       
    }
    // 轮播部分
    .banner{
        width: 1200px;
        height: 597px;
        margin: 10px auto 25px;
        display: flex;
        max-width: 1200px;
        .left{
            width: 214px;
            height: 100%;
            background: #ffffff;
            padding: 20px 0px 0px 15px;
            .con{
                margin-bottom: 30px;
                .title{            
                    height: 16px;
                    font-size: 16px;
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    color: #DA251D;
                    line-height: 16px;
                    margin-bottom: 15px;
                }
                .info{       
                    p{    
                        a{
                            margin-right: 19px;
                        color: #666666;
                        }  
                         a:hover{
                        color: pink;
                        }
                    height: 14px;
                    font-size: 14px;
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    color: #666666;
                    line-height: 14px; 
                    margin-bottom: 9px;                                         
                    }                   
                }
            }
        }
        .center{
            width: 726px;
            height: 597px;  
            margin: 0px 10px;                  
            .el-carousel{
                height: 100%;
            }
            .block{
                 height: 597px;
                 .el-carousel__container{
                     height: 100%;
                 }
                 .el-carousel__button{
                    width: 12px;
                    height: 12px;
                    border: 1px solid #FFFFFF;
                    border-radius: 50%;
                 }
            }
        }
        .right{
            overflow: hidden;
            height: 597px;
            .ul-case{
                display: flex;
                flex-direction: column;    
                justify-content: space-between;    
                li:nth-of-type(2){
                    margin-bottom: 1px;
                }  
                li:nth-of-type(3) .con{
                    margin-bottom: 0px;
                }   
                li{
                    flex: 1;
                    .con{
                        position: relative;
                        width: 240px;
                        height: 192px;
                        margin-bottom: 10px;                 
                        .images{
                            .case-image{
                                width: 240px;
                                height: 192px;
                                display: block;
                            }
                        }
                        p{
                            position: absolute;
                            left: 0px;
                            bottom: 0px;
                            right: 0px;
                            width: 240px;
                            height: 38px;
                            background: #00000070;                                                         ;
                            color: #ffffff;
                            text-align: left;
                            padding-left: 17px;
                            line-height: 38px;
                        }
                    }
                }
            }
        }
    }
    .main{
        // row1屏幕体验专区
        .row-a1{
            background: #ffffff;
            height: 506px;
            overflow: hidden;
            .content{
                width: 1200px;
                margin: 0 auto;
                max-width: 1200px;
                    .title{
                        height: 36px;
                        font-size: 36px;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        color: #222222;
                        line-height: 36px;
                        margin: 40px 0px 31px;
                    }
                    .dianji{                    
                        .el-tabs__item{                         
                            height: 40px;
                            font-size: 16px;
                            font-family: SourceHanSansSC;
                            font-weight: 400;
                            color: #666666;
                            line-height: 40px;
                        }
                        .el-tabs__item:hover{
                            color: #DA251D;
                        }
                        .el-tabs__active-bar{
                            background: #DA251D;
                        }
                        .left{
                            float: left;
                            padding: 39px 0px 0px 24px;
                            width: 590px;
                            height: 250px;
                            background: #FFFFFF;
                            border: 1px solid #DDDDDD;
                            h3{                             
                                height: 18px;
                                font-size: 18px;
                                font-family: SourceHanSansSC;
                                font-weight: 400;
                                color: #222222;
                                line-height: 18px;
                                margin-bottom: 14px;
                            }
                            p{                         
                                height: 28px;
                                font-size: 14px;
                                font-family: SourceHanSansSC;
                                font-weight: 400;
                                color: #999999;
                                line-height: 28px;
                            }
                            .btns{
                                margin-top: 34px;
                                border: none;
                                width: 90px;
                                height: 32px;
                                background: #DA251D;                                                     
                                span{                              
                                    height: 14px;
                                    font-size: 14px;
                                    display: block;
                                    font-family: SourceHanSansSC;
                                    font-weight: 400;
                                    color: #FFFFFF;
                                    line-height: 14px;   
                                    margin-top: -5px;                           
                                }
                            }
                        }
                        .right{
                            float: right;
                            padding: 39px 0px 0px 24px;
                            width: 590px;
                            height: 250px;
                            background: #FFFFFF;
                            border: 1px solid #DDDDDD;
                            h3{                             
                                height: 18px;
                                font-size: 18px;
                                font-family: SourceHanSansSC;
                                font-weight: 400;
                                color: #222222;
                                line-height: 18px;
                                margin-bottom: 14px;
                            }
                            p{                         
                                height: 28px;
                                font-size: 14px;
                                font-family: SourceHanSansSC;
                                font-weight: 400;
                                color: #999999;
                                line-height: 28px;
                            }
                            .btns{
                                margin-top: 34px;
                                width: 90px;
                                height: 32px;
                                background: #FFFFFF;
                                border: 1px solid #CCCCCC;                                                     
                                span{                              
                                    height: 14px;
                                    font-size: 14px;
                                    display: block;
                                    font-family: SourceHanSansSC;
                                    font-weight: 400;
                                    color: #666666FF;
                                    line-height: 14px;   
                                    margin-top: -5px;                           
                                }
                            }                        
                        }
                        .btns:hover{                                                 
                            background: Cyan;
                            transition-duration:2s
                        }
                    }
                    .no-find{
                        a{
                            width: 188px;
                            height: 24px;
                            display: block;
                            display: flex;
                            flex-direction: row;
                            align-items: center;  
                            margin: 0px auto;
                        }                                                         
                        
                        margin: 30px auto 0px;                          
                        .p1{
                            width: 24px;
                            height: 24px;
                            background: #DA251D;
                            border-radius: 50%;                    
                            font-size: 14px;
                            font-family: PingFang;
                            font-weight: bold;
                            color: #FFFFFF;
                            line-height: 24px;
                            text-align: center;
                            margin-right: 10px;
                        }
                        .p2{                
                            height: 14px;
                            font-size: 14px;
                            font-family: SourceHanSansSC;
                            font-weight: 400;
                            color: #666666;
                            line-height: 14px;
                        }
                        a:hover .p1{                          
                             background: #E6E6FA;
                             transition-duration:2s
                        }
                        a:hover .p2{                          
                             color: #E6E6FA;
                             transition-duration:2s
                        }
                    }
                }
            
        }
        // row-a2精英团队
        .mar-right{
            margin-right: 0px!important;
        }
        .row-a2{
            height: 924px;
            background: #f2f2f2;
            .content{
                width: 1200px;
                margin: 0 auto;
                overflow: hidden;
                max-width: 1200px;
                .title{            
                    height: 36px;
                    font-size: 36px;
                    font-family: Adobe Heiti Std;
                    font-weight: normal;
                    color: #333333;
                    line-height: 36px;
                    margin: 40px 0px 31px;
                }
                .ul-pro{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;                   
                    li{                     
                        .con{
                            position: relative;                      
                            margin: 0px 26px 120px 0px;                  
                            .logo{
                                .logo-image{
                                    width: 280px;
                                    height: 280px;
                                    display: block;
                                }
                            }
                            .txt{
                                width: 240px;
                                height: 120px;
                                background: #FFFFFF;
                                box-shadow: 0px 1px 27px 0px rgba(0, 6, 32, 0.1);
                                position: absolute;
                                left: 20px;
                                bottom: -80px;  
                                padding: 19px 22px 0px 18px;                          
                                .txt-title{    
                                    text-align: center;                      
                                    height: 16px;
                                    font-size: 16px;
                                    font-family: Adobe Heiti Std;
                                    color: #333333;
                                    line-height: 16px;
                                    margin-bottom: 14px;
                                }
                                .txt-desc{                              
                                    height: 55px;
                                    font-size: 14px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #666666;
                                    overflow: hidden;
                                    line-height: 18px;
                                    text-overflow:ellipsis;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 3;
                                }
                            }
                        }                                          
                    }
                }
            }
            
        }
        // 这是第三屏幕 客户成功案例
        .row-a3{
            height: 700px;
            background: url('~@/assets/x-home-main-bg-cornerstone.png');
            .content{
                width: 1200px;
                margin: 0 auto;
                overflow: hidden;
                max-width: 1200px;
                .title{
                    height: 36px;
                    font-size: 36px;
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 36px;
                    margin: 40px 0px 58px;
                }
                .neirong{  
                    display: flex;        
                    flex-direction: row;     
                    align-items: center;   
                    padding: 0px 0px 0px 31px;
                    margin-bottom: 41px;
                    .left{
                        .left-image{
                            width: 675px;
                            height: 380px;
                        }
                    }
                    .right{
                        padding: 49px 31px 0px;
                        width: 460px;
                        height: 420px;
                        background: #FFFFFF;
                        .r-title{                        
                            height: 24px;
                            font-size: 24px;
                            font-family: Adobe Heiti Std;
                            font-weight: normal;
                            color: #333333;
                            line-height: 24px;
                            margin-bottom: 18px;
                        }
                        .r-info{                      
                            height: 163px;
                            font-size: 14px;
                            font-family: Adobe Heiti Std;
                            font-weight: normal;
                            color: #666666;
                            line-height: 24px;
                            margin-bottom: 53px;
                        }
                        .r-desc{                           
                            height: 14px;
                            font-size: 14px;
                            font-family: Adobe Heiti Std;
                            font-weight: normal;
                            color: #666666;
                            line-height: 14px;
                            margin-bottom: 23px;
                            a{
                                color: #DA251DFF;
                            }
                            a:hover{
                                color: #FF00FF;
                            }
                        }
                        .bton{                     
                            .yuedu{
                                width: 96px;
                                height: 32px;
                                background: #FFFFFF;
                                border-radius: 0px;
                                border: 1px solid #CCCCCC;
                                 padding: 0px;
                                span{                               
                                    height: 14px;
                                    font-size: 14px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #333333;                          
                                }
                            }
                            .zixun{
                                width: 124px;
                                height: 32px;
                                background: #DA251D;
                                border: none;
                                border-radius: 0px;
                                padding: 0px;
                                span{                              
                                    height: 14px;
                                    font-size: 14px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #FFFFFF;                                
                                }
                            }
                            button:hover{                      
                                background: turquoise;  
                                transition-duration: 2s;                           
                            }
                        }
                    }
                }
                .brand{
                    display: flex;
                    justify-content: space-between;
                    padding: 0px 24px 0px 31px;
                    a{
                        display: block;
                        width: 180px;
                        height: 62px;
                        background: #FFFFFF;
                        margin-right: 10px;                       
                        // .brand-image{
                        //     width: 100%;
                        // }                      
                    }
                    a:nth-of-type(2){
                        .brand-image{
                            width: 100%;
                        }  
                    }
                }
            }
        }
        // 这是第四屏幕
        .row-a4{         
            height: 760px;
            background: #F9F9F9;
            .content{
                width: 1200px;
                margin: 0 auto;   
                padding-top: 39px;   
                max-width: 1200px;
                .top{
                    margin-bottom: 49px;
                }        
                    .title{                    
                        height: 346x;
                        font-size: 36px;
                        font-family: Adobe Heiti Std;
                        font-weight: normal;
                        color: #222222;
                        line-height: 36px;
                        margin-bottom: 31px;
                    }
                    .ul-list{                     
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        padding-left: 8px;
                        li{                         
                            .con{
                                 width: 380px;
                                height: 240px;
                                background: #FFFFFF;
                                box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.06);
                                padding: 40px 0px 0px 21px;
                                .con-title{                          
                                    height: 20px;
                                    font-size: 20px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #333333;
                                    line-height: 20px;
                                }
                                .con-desc{                            
                                    height: 16px;
                                    font-size: 16px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #999999;
                                    line-height: 16px;
                                    margin: 20px 0px;
                                }
                                .con-bos{
                                    width: 70px;
                                    height: 24px;
                                    background: #FFFFFF;
                                    border: 1px solid #FF9000;
                                    border-radius: 3px;                        
                                    font-size: 14px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #FF9000;
                                    line-height: 22px;
                                    text-align: center;
                                    margin-bottom: 40px;
                                }
                                .btns:hover{
                                    background:powderblue;
                                    transition-duration: 2s;
                                }
                                .btns{
                                    padding: 0px;
                                    width: 96px;
                                    height: 32px;
                                    background: #FFFFFF;
                                    border-radius: 0px;
                                    border: 1px solid #CCCCCC;
                                    span{                            
                                        height: 14px;
                                        font-size: 14px;
                                        font-family: Adobe Heiti Std;
                                        font-weight: normal;
                                        color: #666666;
                                        line-height: 14px;
                                    }
                                }
                            }                                                 
                        }
                    }
                
            }
        }
        .row-a5{
            height: 540px;
            background: #000C2C;
            // background: url('~@/assets/SquareRobot_NOTEXT.png');
            .content{
                width: 1180px;
                margin: 0 auto;
                text-align: center;
                overflow: hidden;
                max-width: 1200px;
                .title{                
                    height: 36px;
                    font-size: 36px;
                    font-family: Adobe Heiti Std;
                    font-weight: normal;
                    color: #FFFFFF;
                    line-height: 36px;
                    margin: 61px 0px 39px;
                }
                .logo{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 60px;
                    .logo-img{
                        width: 380px;
                        height: 240px;
                        position:relative;
                        .a5-image{
                            width: 380px;
                            height: 240px;
                        }
                        p{                    
                            height: 40px;
                            background: #0000006b;                        
                            position: absolute;
                            left: 0px;
                            bottom: 0px;
                            right: 0px;
                            text-align: left;                          
                            font-size: 16px;
                            font-family: SourceHanSansSC;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 40px;
                            padding-left: 15px;
                        }
                    }                 
                }
                .btns{
                    width: 140px;
                    height: 40px;
                    border: 2px solid #F9F9F9;
                    background: none;
                }
                .btns:hover{
                    background: cornflowerblue;
                    transition-duration: 2s;
                }
            }
        }
        // 第6屏幕
        .row-a6{
            height: 531px;
            background: #ffffff;
            .content{
                width: 1180px;
                margin:  0 auto;
                text-align: center;
                overflow: hidden;
                max-width: 1200px;
                .title{           
                    height: 36px;
                    font-size: 36px;
                    font-family: Adobe Heiti Std;
                    font-weight: normal;
                    color: #333333;
                    line-height: 36px;
                    margin-bottom: 49px;
                    margin-top: 59px;
                }
                .ul-pros{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    li{                    
                        .con{
                            width: 380px;
                            height: 325px;
                            background:  #F9F9F9;
                            .logo{
                                .a6-image{
                                    width: 380px;
                                    height: 160px;  
                                    display: block;    
                                }
                                margin-bottom: 32px;
                            }
                            .txt{
                                .txt-title{                             
                                    height: 24px;
                                    font-size: 24px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #333333;
                                    line-height: 24px;
                                    margin-bottom: 22px;
                                }
                                .txt-p1{                               
                                    height: 14px;
                                    font-size: 14px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #666666;
                                    line-height: 14px;
                                    margin-bottom: 11px;
                                }
                                .txt-p2{                               
                                    height: 14px;
                                    font-size: 14px;
                                    font-family: Adobe Heiti Std;
                                    font-weight: normal;
                                    color: #666666;
                                    line-height: 14px;
                                }
                            }
                        }                                          
                    }
                }
            }
        }
        .row-a7{
            height: 180px;
            background: #DA251D;
            .content{
                width: 1180px;
                margin: 0 auto;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding-top: 56px;
                max-width: 1200px;
                .left{
                    h3{                    
                        height: 36px;
                        font-size: 36px;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 36px;
                        margin-bottom: 19px;
                    }
                    p{
                        height: 16px;
                        font-size: 16px;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 16px;
                    }
                }
                .right{
                    button:hover{
                        background: palegreen;
                    }
                    .dingzhi{
                        width: 150px;
                        height: 48px;
                        background: #FFFFFF;
                        border: 2px solid #F9F9F9;
                        padding: 0px;
                        span{                    
                            height: 18px;
                            font-size: 18px;
                            font-family: SourceHanSansSC;
                            font-weight: 400;
                            color: #DA251D;
                            line-height: 18px;
                        }
                    }
                    .zixun{
                        width: 150px;
                        height: 48px;
                        background: #FF9000;
                        border: none;
                        span{                      
                            height: 18px;
                            font-size: 18px;
                            font-family: SourceHanSansSC;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 18px;
                        }
                    }
                }
            }
        }

    }
    // 这是底部部分
    .footer{
        height: 440px!important;
        background: #000000;
        .conent{
            width: 1200px;
            margin: 0 auto;
            max-width: 1200px;
            .top{
                display: flex;
                flex-direction: row;
                padding-top: 50px;
                padding-bottom: 50px;
                border-bottom: 1px solid #333333;
                .left{
                    .ul-txt{
                        display: flex;
                        flex-direction: row;
                        .con{
                            width: 217px;                        
                            .title{                   
                                height: 18px;
                                font-size: 18px;
                                font-family: SourceHanSansSC;
                                font-weight: 400;
                                color: #999999;   
                                margin-bottom: 23px;                          
                            }
                            .txt{
                                a{
                                    display: block;
                                }
                                p:hover{
                                    color: cadetblue;                                                               
                                }
                                p{                                                            
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #999999;
                                    line-height: 30px;                                
                                }
                            }
                        }
                    }
                }
                .right{
                    .title{                     
                        height: 18px;
                        font-size: 18px;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        color: #999999;   
                        margin-bottom: 23px;                 
                    }
                    .logo{
                        display: flex;
                        a{
                            display: block;
                            margin-right: 31px;
                        }
                    }
                }
            }
            .middle{
                display: flex;
                flex-direction: row;
                padding: 20px 0px;
                border-bottom: 1px solid #333333;
                justify-content: space-between;
                .txt{                  
                    p{                      
                        height: 36px;
                        font-size: 14px;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        color: #999999;
                        line-height: 36px; 
                        display: flex;
                        flex-direction: row;
                        span:hover{
                            color: cornflowerblue;
                            transition-duration: 1s;
                        }
                        span{
                            display: inline-block;                                               
                            height: 14px;
                            font-size: 14px;
                            font-family: SourceHanSansSC;
                            font-weight: 400;
                            color: #525252;
                            line-height: 36px;                                               
                        }
                        span:nth-of-type(1){
                            margin-left: 31px;
                            width: 70px;
                            margin-right: 22px;
                        }
                        span:nth-of-type(2){                       
                            width: 125px;
                            margin-right: 22px;
                        }
                        span:nth-of-type(3){                       
                            width: 125px;
                            margin-right: 22px;
                        }
                        span:nth-of-type(4){                       
                            width: 42px;
                            margin-right: 60px;
                        }
                    }
                }
                .erweima{
                    .erweima-img{
                        width: 100px;
                        height: 99px;
                    }
                }
            }
            .bottom{
                display: flex;
                .logo{
                    margin-top: 15px;
                    margin-right: 21px;
                    .logo-image{
                        width: 99px;
                        height: 51px;
                    }
                }
                .txt{
                    p:hover{
                        border-bottom: 1px solid #cccccc;
                        color: aquamarine;
                        transition-duration: 2s;
                    }
                    .p1{                     
                        height: 14px;
                        font-size: 14px;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        color: #666666;
                        line-height: 14px;
                        margin: 27px 0px 14px;
                    }
                    .p2{
                        height: 14px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #666666;
                        line-height: 14px;                              
                    }
                }
            }
        }
    }
}
</style>
<script>
export default {
    data:function(){
        return{
            activeName: 'first'
        }
    }
}
</script>
